<template>
  <div style="position: relative">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"
      style="margin: 20px;background: #fff;min-height:90vh;padding: 20px">
      <el-tab-pane label="表单设计" name="first">
        <mouth ref="tabeldata" v-if="templateId === '2020'" :title="title" :list1="list1" :id="ruleForm.data.id"></mouth>
      </el-tab-pane>
      <el-tab-pane label="流程设定" name="second" v-if="store.state.userInfo.userRole === '1'">
        <div>
          <div
            style="width: 16%;display: inline-block;vertical-align: middle;position: relative;min-height:90vh;border-right: 1px solid #f5f5f5">
            <div style="width: 200px;margin: 0 auto;position: absolute;top: 20px">
              <div @click="addspList"
                style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative;text-align: center;cursor: pointer">
                <img
                  style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
                  src="../../assets/流程节点.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程节点</div>

              </div>
            </div>
          </div>
          <div style="width: 60%;display: inline-block;vertical-align: middle;text-align: center;min-height:90vh;">
            <div style="width: 200px;margin: 0 auto">
              <div
                style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
                <img
                  style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
                  src="../../assets/抄送节点1.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程发起节点</div>

              </div>
            </div>
            <div style="width: 200px;margin: 0 auto" v-for="(item, index) in checkInfoList">
              <img src="../../assets/1_直线.png">
              <div @click="getIndex(index)"
                style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative;cursor: pointer">
                <img
                  style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
                  src="../../assets/流程节点备份.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">{{ item.name }}</div>
              </div>
            </div>

            <div style="width: 200px;margin: 0 auto">
              <img src="../../assets/1_直线.png">
              <div
                style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
                <img
                  style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
                  src="../../assets/流程结束.png">
                <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程结束</div>

              </div>
            </div>
          </div>
          <div style="width: 20%;display: inline-block;vertical-align: middle;min-height:90vh; ">
            <el-form>
              <h3>节点属性</h3>
              <el-form-item label="节点名称">
                <el-input v-model="checkInfoList[index].name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="截止时间">
                <el-date-picker v-model="checkInfoList[index].deadline" type="datetime" value-format="YYYY-MM-DD h:mm:ss"
                  placeholder="选择审核截止时间" />
              </el-form-item>
              <el-form-item label="负责人">
                <el-select v-model="checkInfoList[index].userId" placeholder="">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="savebg" v-if="ruleForm.data.id && list2.rState === '1'"
      style="position: absolute;top: 20px;right: 40px" type="primary">保存</el-button>
    <el-button v-if="ruleForm.data.id && list2.rState === '1'" @click="savefb"
      style="position: absolute;top: 20px;right: 130px" type="primary">上报</el-button>
    <el-button v-if="ruleForm.data.id && shState === '1' && store.state.userInfo.userRole !== '3'" @click="dhqj"
      style="position: absolute;top: 20px;right: 230px" type="primary">打回</el-button>
    <el-button  @click="backOld"
      style="position: absolute;top: 20px;right: 130px" type="primary">返回</el-button>
    <el-button v-if="ruleForm.data.id && shState === '1' && store.state.userInfo.userRole !== '3'" @click="sh"
      style="position: absolute;top: 20px;right: 30px" type="primary">审核</el-button>
    <el-dialog v-model="dialogVisible1" title="提示" width="30%" :before-close="handleClose">
      <div>
        {{ remark }}
      </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible5" title="退回" width="30%" :before-close="handleClose">
      <el-form ref="ruleFormRef" :model="form2" label-width="80px">
        <el-form-item label="原因">
          <el-input v-model="form2.reason" autocomplete="off" style="width: 300px" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible5 = false">取消</el-button>
          <el-button type="primary" @click="dh">
            退回
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible7" title="审核" width="30%" :before-close="handleClose">
      <el-form ref="ruleFormRef" :model="form2" label-width="80px">
        <el-form-item label="原因">
          <el-input v-model="form2.reason" autocomplete="off" style="width: 300px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible7 = false">取消</el-button>
          <el-button type="primary" @click="shtg">
            审核通过
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue'
import type { TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
import mouth from "./mouth.vue"
const activeName = ref('first')
import { useRoute, useRouter } from "vue-router";
const fileList = ref<UploadUserFile[]>([

])
const backOld = () => {
  router.go(-1)
}
const dhqj = () => {
  form2.reason = ""
  dialogVisible5.value = true
}
const shtg = (val: any) => {
  let data = {
    id: list2.value.checkInfoId,
    shResult: '1',
    reason: form2.reason
  }
  statisticalcheck(data).then((res: any) => {
    dialogVisible7.value = false
    router.push({
      path: '/assess'
    })
  })
}
const dialogVisible7 = ref(false)
import { useStore } from '@/store'
const store = useStore()
const form2: any = reactive({ reason: '' })
const dialogVisible5: any = ref(false)
import {
  reportfindById,
  reportpublish,
  reportSave,
  statisticalFindbyId, statisticalgetProveByStaId, statisticalpublish,
  statisticalsave,
  userGetAllUser, statisticalsetFile, reportcheck, statisticalcheck
} from "@/util/api";
import { ElMessageBox, ElNotification } from "element-plus";
const route = useRoute()
const router = useRouter();
const templateId = ref('')
const title: any = ref('')
const folder = ref('')
const cllist: any = ref([])
const developArea = ref('')
const index: any = ref(0)
const userList: any = ref("")
const dialogVisible1 = ref(false)
const remark: any = ref('')
const tabeldata: any = ref({
  list1: {
    title: '',
    templateId: '',
    listTemp: ''
  }
})
const sh = () => {
  form2.reason = ""
  dialogVisible7.value = true
}
const dh = (val: any) => {
  let data = {
    id: list2.value.checkInfoId,
    shResult: '2',
    reason: form2.reason
  }
  statisticalcheck(data).then((res: any) => {
    router.push({
      path: '/assess'
    })

  })
}
const url = ref('')
const opendia = (val: any) => {
  remark.value = val.remark
  dialogVisible1.value = true
}
const checkInfoList: any = ref([
  {
    deadline: '',
    reportId: '',
    reportName: '',
    sort: '',
    userId: '',
    nextUserId: '',
    name: '审批节点'
  }
])
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭弹窗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const downfile = (val: any) => {
  // https://report.cpzsyun.com:90/api/file/show/新建文件夹.txt
  window.open("https://report.cpzsyun.com:90/api/file/show/" + val)
}

const uploadid: any = ref('')
const getid = (id: any) => {
  uploadid.value = id
}

const beforeUpload = (files: any) => {
  let formdata = new FormData()
  formdata.append('id', uploadid.value)
  formdata.append('files', files)
  statisticalsetFile(formdata).then((res) => {
    getdata()
  })
}

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  // let formdata = new FormData()
  // formdata.append('id',uploadid.value)
  // formdata.append('files',uploadFile.raw)
  // statisticalsetFile(formdata).then((res)=>{
  //   getdata()
  // })


}


const getIndex = (val: any) => {
  if (index.value == val) {

  } else {
    let arr = checkInfoList.value
    if (arr[index.value].name && arr[index.value].userId) {
      index.value = val
    } else {
      ElNotification({
        title: '提示',
        message: h('i', { style: 'color: teal' }, '请先将当前节点填写完成'),
      })
    }
  }
}

const getuser = () => {
  userGetAllUser("").then((res: any) => {
    userList.value = res.data
  })
}


const addspList = () => {
  let arr = checkInfoList.value
  if (arr[index.value].name && arr[index.value].deadline && arr[index.value].userId) {
    checkInfoList.value.push({
      deadline: '',
      reportId: '',
      reportName: '',
      sort: '',
      userId: '',
      nextUserId: '',
      name: '',
    })
  } else {
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: teal' }, '请先将当前节点填写完成'),
    })
  }
}


const list1: any = ref({})
const list2: any = ref({})
let ruleForm: any = reactive({
  data: {
    name: '',
    radio1: '',
    folder: '',
    developArea: ''
  },
})


const getdata = () => {
  statisticalFindbyId(ruleForm.data.id).then((res: any) => {
    title.value = res.data.name
    folder.value = res.data.folder
    developArea.value = res.data.developArea
    let arr = res.data
    list2.value = arr
    list1.value = JSON.parse(arr.info)
    if (arr.checkInfoList.length >= 1) {
      checkInfoList.value = arr.checkInfoList
    }
  })

  statisticalgetProveByStaId(ruleForm.data.id).then((res: any) => {
    cllist.value = res.data
    let arr = cllist.value
    let arrlist = []
    for (let i = 0; i < arr.length; i++) {
      arr[i].fileJson = JSON.parse(arr[i].fileJson)
    }
  })
}
const shState: any = ref('')
onMounted(() => { 
  ruleForm.data = route.query
  templateId.value = String(ruleForm.data.radio1)
  shState.value = String(ruleForm.data.shState)
  getuser()
  if (ruleForm.data.id) {
    statisticalFindbyId(ruleForm.data.id).then((res: any) => {
      title.value = res.data.name
      folder.value = res.data.folder
      developArea.value = res.data.developArea
      let arr = res.data
      // list1.value = arr
      if (arr.info) {
        list1.value = JSON.parse(arr.info)
      }
      list1.value.listTemp = JSON.parse(arr.list)
      list2.value = arr
      // list1.value = JSON.parse(arr.info)
      if (arr.checkInfoList.length > 0) {
        checkInfoList.value = arr.checkInfoList
      }
      for (let i = 0; i < checkInfoList.value.length; i++) {
        if (checkInfoList.value[i].deadline) {
          checkInfoList.value[i].deadline = ""
        }
      }
      // console.log(checkInfoList.value[0])
      // tabeldata.list1 = arr
    })

    statisticalgetProveByStaId(ruleForm.data.id).then((res: any) => {
      cllist.value = res.data
      let arr = cllist.value
      for (let i = 0; i < arr.length; i++) {
        arr[i].fileJson = JSON.parse(arr[i].fileJson)

      }
      // console.log(cllist.value[0])
    })

  } else {
    title.value = ruleForm.data.name
    folder.value = ruleForm.data.folder
    developArea.value = ruleForm.data.developArea
  }

  // console.log(typeof (templateId.value))

})

const savefb = () => {
  statisticalpublish(ruleForm.data.id).then((res) => {
    router.push({
      path: "/assess"
    })
  })
}



const savebg = () => {

  tabeldata.value.list1.title = title.value
  // tabeldata.value.list1.templateId = templateId.value
  let arr = checkInfoList.value
  for (let i = 0; i < arr.length; i++) {
    // console.log(i)
    if (i == arr.length - 1) {

    } else {
      arr[i].nextUserId = arr[i + 1].userId
    }
    arr[i].sort = i + 1
    arr[i].reportName = title.value
  }
  if (arr[index.value].name && arr[index.value].deadline && arr[index.value].userId) {

  } else {
    checkInfoList.value = []
  }


  // console.log(checkInfoList.value)
  if (ruleForm.data.id) {
    var data: any = list2.value
    data.infoTemp = tabeldata.value.list1
    data.listTemp = tabeldata.value.list1.listTemp
    // if()
    data.checkInfoList = checkInfoList.value
    for (let i = 0; i < arr.length; i++) {
      arr[i].reportId = ruleForm.data.id
    }
  } else {
    var data: any = {
      infoTemp: tabeldata.value.list1,
      listTemp: tabeldata.value.list1.listTemp,
      name: title.value,
      templateId: templateId.value,
      developArea: developArea.value,
      // folder:folder.value,
      checkInfoList: checkInfoList.value
    }
  }
  // console.log(data)
  statisticalsave(data).then((res: any) => {
    router.push({
      path: "/assess"
    })
  })
}


const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
